<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../../../libs/bootstrap/css/bootstrap.css">
    <script type="text/javascript" src="../../../libs/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="../../../libs/bootstrap/js/bootstrap.min.js"></script>
</head>
<body style="padding: 20px;">

<button id="btn-add" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#add-modal">新增</button>

<button id="btn-delete" class="btn btn-primary">删除</button>

<button id="btn-edit" class="btn btn-primary">编辑</button>

<button id="btn-search" class="btn btn-primary">查询</button>

<input id="search-by-name" class="form-inline" name="" placeholder="按姓名查询">
<input id="search-by-num" class="form-inline" name="" placeholder="按工号查询">

<br>
<br>

<table id="table" class="table table-bordered table-condensed table-responsive">
    <!-- <caption>员工信息表</caption> -->
    <thead>
    <tr>
        <th>序号</th>
        <th>工号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>密码</th>
        <th>年龄</th>
        <th>出生日期</th>
    </tr>
    </thead>
    <tbody></tbody>
</table>

<!-- add modal -->
<div class="modal fade" id="add-modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                添加记录
            </div>
            <div class="modal-body">
                <input id="add-modal-num" class="modal-input" name="" placeholder="工号">
                <input id="add-modal-name" class="modal-input" name="" placeholder="姓名">
                <input id="add-modal-gender" class="modal-input" name="" placeholder="性别">
                <input id="add-modal-password" class="modal-input" name="" placeholder="密码">
                <input id="add-modal-age" class="modal-input" name="" placeholder="年龄">
                <input id="add-modal-dob" class="modal-input" name="" placeholder="出生日期">
            </div>
            <div class="modal-footer">
                <button id="btn-add-modal-confirm" class="btn btn-primary">确定</button>
                <button class="btn btn-default" data-bs-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!-- edit modal -->
<div class="modal fade" id="edit-modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                编辑记录
            </div>
            <div class="modal-body">
                <input id="edit-modal-num" class="modal-input" name="" placeholder="工号">
                <input id="edit-modal-name" class="modal-input" name="" placeholder="姓名">
                <input id="edit-modal-gender" class="modal-input" name="" placeholder="性别">
                <input id="edit-modal-password" class="modal-input" name="" placeholder="密码">
                <input id="edit-modal-age" class="modal-input" name="" placeholder="年龄">
                <input id="edit-modal-dob" class="modal-input" name="" placeholder="出生日期">
            </div>
            <div class="modal-footer">
                <button id="btn-edit-modal-confirm" class="btn btn-primary">确定</button>
                <button class="btn btn-default" data-bs-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

</body>
<script type="text/javascript">
	$(".modal-input").css("margin", "10px");
</script>
<script type="text/javascript" src="helper.js"></script>
</html>
